<template>
  <IEcharts
    :option="option"
    @ready="onReady"
  />
  <!-- -->
</template>

<script>
  import IEcharts from 'vue-echarts-v3/src/full.js'
  
  export default {
    props: {
      option: {
        Type: Object
      },
      data: {
        Type: Array,
        default: function () {
          return []
        }
      },
      onReady: [Function, Object],
      minValue: Number,
      maxValue: Number,
      minAge: Number,
      maxAge: Number,
      category: String
    },
    components: {
      IEcharts
    },
    watch: {
      option () {
        // this.onReady(this.ins, this.echarts)
      }
    },
    mounted () {
      this.$nextTick(() => {
        window.that = this
      })
    },
    data () {
      return {
        ins: null,
        echarts: null
      }
    },
    methods: {
      onReadys (instance, echarts) {
        const that = this
        that.ins = instance
        that.echarts = echarts
        const updatePosition = () => {
          that.ins.setOption({
            graphic: that.echarts.util.map(this.data, (item, dataIndex) => {
              return {
                position: that.ins.convertToPixel('grid', item)
              }
            })
          })
        }
        const showTooltip = (dataIndex) => {
          that.ins.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: dataIndex
          })
        }
        const hideTooltip = (dataIndex) => {
          that.ins.dispatchAction({
            type: 'hideTip'
          })
        }
        const onPointDragging = (dataIndex, dx, dy) => {
          this.data[dataIndex] = that.ins.convertFromPixel('grid', this.position)
          // Update data
          that.ins.setOption({
            series: [{
              id: 'a',
              data: this.data
            }]
          })
        }

        const setOption = () => {
          that.ins.setOption({
            graphic: that.echarts.util.map(that.data, (item, dataIndex) => {
              return {
                type: 'circle',
                position: that.ins.convertToPixel('grid', item),
                shape: {
                  cx: 0,
                  cy: 0,
                  r: that.symbolSize / 2
                },
                invisible: true,
                draggable: false,
                ondrag: that.echarts.util.curry(onPointDragging, dataIndex),
                onmousemove: that.echarts.util.curry(showTooltip, dataIndex),
                onmouseout: that.echarts.util.curry(hideTooltip, dataIndex),
                z: 100
              }
            })
          })
        }

        setTimeout(() => {
          setOption()
        }, 500)
        window.addEventListener('resize', updatePosition)
        that.ins.on('dataZoom', updatePosition)
      }
    }
  }
</script>

<style scoped lang="scss">
</style>